<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Lobby</title>
	<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		function addRoom(room) {
			$('<button></button>').attr({
				'data-room': room
			}).text('Room Number: ' + room).appendTo('#container');
		};
	
		$(document).ready(function() {
			$.getJSON('/rooms', function(data) {
				$.each(data, function(index, room) {
					addRoom(room);
				});
			});
			
			var socket = io.connect();
			socket.on('addroom', function(room) {
				addRoom(room);
			});
			
			$('#container > button').live('click', function() {
				var room = $(this).attr('data-room');
				location = '/canvas/' + room;
			});
			
			$('body > button').click(function() {
				var room = $('#room').val();
				socket.emit('addroom', room);
				
				location = '/canvas/' + room;
			});
		});
	</script>
</head>
<body>
	<h1>Painter Real Time</h1>
	<p>Connect Web Server With Socket</p>
	<span>ROOM: </span><input id="room"/><button>CREATE ROOM</button>
	<hr/>
	<div id="container"></div>
</body>
</html>